<template>
  <div>
    <!-- 好评电影 -->
    <movie-praise :praiselist="praiselist"></movie-praise>
    <div class="line"></div>
    <!-- 热映模块 -->
    <movie-hot :hotlist="hotlist"></movie-hot>
    <!-- 列表跳转内容页 -->
    <ul>
      <li v-for="item in hot2list" :key="item.id">
        <router-link :to="'/movieitem/' + item.id">
          <img :src="item.img" />
          {{ item.nm }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
//引入热映组件
import MovieHot from "./components/MovieHot.vue";
import MoviePraise from "./components/MoviePraise.vue";
//引入 axios
import axios from "axios";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Reying",
  //注册
  components: {
    MovieHot,
    MoviePraise,
  },
  data() {
    return {
      hotlist: [],
      hot2list: [],
      praiselist: [], //好评电影
    };
  },
  mounted() {
    axios
      .get(
        "/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4",
        { ct: "深圳", ci: 30, channelId: 4 }
      )
      .then((res) => {
        console.log(res);
        this.hotlist = res.data.data.hot;
        this.praiselist = [...this.hotlist];
        //排序
        this.praiselist.sort((a, b) => {
          return b.sc - a.sc;
        });
        console.log(this.praiselist);
      });
    //本地数据
    axios.get("./json/movieOnInfoList.json").then((res) => {
      console.log(res);
      this.hot2list = res.data.movieList;
      this.hot2list.forEach((item) => {
        console.log(item);
        item.img = item.img.replace("w.h", "64.90");
      });
    });
  },
};
</script>

<style lang="less" scoped>
.line {
  width: 100%;
  height: 10px;
  background: #eee;
  margin-bottom: 10px;
}
</style>